<template>
  <div class="TeaMaking">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" style="margin-left:30px;"><router-link :to="{name:'black'}"><span>红茶</span></router-link></el-menu-item>
        <el-menu-item index="2" style="margin-left:30px;"><router-link :to="{name:'green'}">绿茶</router-link></el-menu-item>
        <el-menu-item index="3" style="margin-left:30px;"><router-link :to="{name:'dark'}">黑茶</router-link></el-menu-item>
        <el-menu-item index="4" style="margin-left:30px;"><router-link :to="{name:'oolong'}">乌龙茶</router-link></el-menu-item>
        <el-menu-item index="5" style="margin-left:30px;"><router-link :to="{name:'white'}">白茶</router-link></el-menu-item>
        <el-menu-item index="6" style="margin-left:30px;"><router-link :to="{name:'yellow'}">黄茶</router-link></el-menu-item>
      </el-menu> 
      <div class="showArea">
          <router-view></router-view>
      </div>
  </div>
</template>

<script>
export default {
    name:'TeaMaking',
    data() {
        return {
            activeIndex: '1',
        }
    },
}
</script>

<style scoped lang='less'>
.el-menu-demo{
    a{
        display: inline-block;
        width: 100%;
        height: 100%;
        text-decoration: none;
       /*  span{
            display: inline-block;
            width: 100%;
            height: 100%;
        } */
    }
    span{
        width: 40px;height: 30px;
    }
}
.showArea{
    width: 100%;
    min-height: 600px;
    background-color: white;
}
</style>